<template>
  <div class="file_load_upload">
    <div>
      <el-row :gutter="10">
        <el-col :span="24" :md="10" :lg="10" :xl="10">
          <el-row>
            <el-col :span="12">
              <el-input
                v-model.trim="name"
                placeholder="请输入名称"
                suffix-icon="Search"
                @keyup.enter="load"
                @keyup.esc="name = ''"
            /></el-col>
            <el-col :span="12">
              <el-button class="ml-5" type="primary" @click="load"
                >搜索</el-button
              >
              <el-button type="warning" @click="reset">重置</el-button>
            </el-col>
          </el-row></el-col
        ></el-row
      >
    </div>

    <el-row class="mb-10">
      <el-col :span="24">
        <el-upload
          class="upload_file"
          :action="'http://' + serverIp + ':9090/file/upload'"
          :show-file-list="false"
          :on-success="handleFileUploadImportSuccess"
          :on-error="handleFileUploadImportError"
        >
          <el-button type="primary">
            上传文件<el-icon class="ml-5" size="20px"><Upload /></el-icon>
          </el-button>
        </el-upload>
        <el-popconfirm
          confirm-button-text="确定"
          cancel-button-text="我再想想"
          icon="InfoFilled"
          icon-color="red"
          title="您确定批量删除这些数据吗?"
          @confirm="delBatch"
          ><template #reference>
            <el-button type="danger" class="ml-5"
              >批量删除<el-icon class="ml-10" size="20px"><Remove /></el-icon
            ></el-button> </template
        ></el-popconfirm>
      </el-col>
    </el-row>

    <div class="mt-10">
      <el-table
        :data="tableData"
        border
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="id" label="id" width="80" />
        <el-table-column prop="name" label="文件名称" />
        <el-table-column prop="type" label="文件类型" />
        <el-table-column prop="size" label="文件大小(kb)" />
        <el-table-column label="下载">
          <template v-slot:default="scope">
            <el-button type="primary" @click="download(scope.row.url)"
              >下载</el-button
            >
          </template>
        </el-table-column>
        <el-table-column label="启用">
          <template v-slot:default="scope">
            <el-switch
              v-model="scope.row.enable"
              active-color="#13ce66"
              inactive-color="#ccc"
              @change="changeEnable(scope.row)"
            />
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200" align="center">
          <template v-slot:default="scope">
            <!-- 气泡确认框 删除确认框 -->
            <el-popconfirm
              width="220"
              confirm-button-text="确定"
              cancel-button-text="我再想想"
              icon="InfoFilled"
              icon-color="red"
              title="您确定删除吗?"
              @confirm="del(scope.row.id)"
            >
              <template #reference>
                <el-button type="danger"
                  >删除<el-icon class="ml-5"><Delete /></el-icon
                ></el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页 -->
    <div class="demo-pagination-block">
      <el-pagination
        v-model:current-page="pageNum"
        v-model="pageSize"
        :page-sizes="[2, 5, 10, 20]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        :small="small"
        :disabled="disabled"
        :background="background"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import { serverIp } from '../../../public/config'

export default {
  name: 'MyFile',
  data() {
    return {
      serverIp: serverIp,
      tableData: [],
      name: '',
      multipleSelection: [],
      //   分页器
      pageNum: 1,
      pageSize: 10,
      small: false,
      disabled: false,
      background: false,
      total: 0
    }
  },
  created() {
    this.load()
  },
  methods: {
    // 分页
    handleSizeChange(pageSize) {
      console.log('页数:' + pageSize)
      this.pageSize = pageSize
      this.load()
    },
    handleCurrentChange(pageNum) {
      console.log('每页的数据：' + pageNum)
      this.pageNum = pageNum
      this.load()
    },

    // 请求分页查询的数据
    load() {
      this.$http
        .get('/file/page', {
          params: {
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            name: this.name
          }
        })
        .then((res) => {
          console.log('分页类型' + typeof res)
          console.log(res)
          this.tableData = res.data.records
          this.total = res.data.total
        })
    },
    // 重置
    reset() {
      this.name = ''
      this.load()
    },

    // 新增数据
    save_info() {
      this.$http.post('/user', this.form).then((res) => {
        if (res.data) {
          this.$message.success('保存成功')
          this.dialogFormVisible = false
          // 刷新页面数据
          this.load()
        } else {
          this.$message.error('保存失败')
        }
      })
    },

    // 删除
    del(id) {
      this.$http.delete('/file/' + id).then((res) => {
        console.log(res)
        if (res.status === '200') {
          this.$message.success('删除成功')
          // 刷新页面数据
          this.load()
        } else {
          this.$message.error('删除失败')
        }
      })
    },
    // 批量删除
    handleSelectionChange(val) {
      console.log(val)
      this.multipleSelection = val
    },

    delBatch() {
      // 对象数组变成 纯id的数组
      let ids = this.multipleSelection.map((v) => v.id) //[{},{},{}]=>[1,2,3]
      console.log(ids)

      this.$http.delete('/file/del/batch', { data: ids }).then((res) => {
        if (res.status === '200') {
          this.$message.success('批量删除成功')
          // 刷新页面数据
          this.load()
        } else {
          this.$message.error('批量删除失败')
        }
      })
    },
    handleFileUploadImportSuccess() {
      this.$message.success('上传成功')
      this.load()
    },
    handleFileUploadImportError() {
      this.$message.error('上传失败')
      this.load()
    },
    // 下载
    download(url) {
      window.open(url)
    },
    // 更新字段
    changeEnable(row) {
      this.$http.post('/file/update', row).then((res) => {
        console.log(res)
        if (res.status === '200') {
          this.$message.success('操作成功')
        } else {
          this.$message.error('操作失败')
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
// 分页
.demo-pagination-block {
  padding: 10px;
}
.upload_file {
  display: inline-flex;
  /deep/ .el-upload {
    display: block !important;
  }
}
</style>